<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
        
		<div id="app">
            <input type="text" v-model="val">
            <button @click="add">add</button>
            <ul>
                <li v-for="item in arrdata" :key="item.id">
                    <input type="checkbox">
                    {{item.name}}
                </li>
            </ul>
		</div>
		<script>
            //vue 核心---》围绕数据展开，操作数据
            var vm=new Vue({
				el:"#app",
                data:{
                    val:"",
                    arrdata:[
                        {id:"001",name:"黎明"},
                        {id:"002",name:"范湖"},
                        {id:"003",name:"房水"}
                    ]
                },
                methods:{
                    add(){
                        let obj={
                            id:+new Date(),
                            name:this.val  
                        }
                        this.arrdata.unshift(obj);
                        this.val="";//清空 val
                    }
                }
			})
		</script>
	</body>
</html>
